<template>
  <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <router-link class="navbar-brand" to="/">
        <img src="../assets/logo.png" alt="Krilion" height="50" />
      </router-link>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul v-if="!user" class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
        <ul
          v-else-if="user.role == 'user'"
          class="navbar-nav me-auto mb-2 mb-lg-0"
        >
          <li class="nav-item">
            <router-link class="nav-link active" aria-current="page" to="/"
              >Главная</router-link
            >
          </li>
          <li class="nav-item">
            <router-link class="nav-link active" aria-current="page" to="/write"
              >Написать</router-link
            >
          </li>
          <li class="nav-item">
            <router-link class="nav-link active" aria-current="page" to="/view"
              >Мои заявления</router-link
            >
          </li>
        </ul>
        <ul
          v-else-if="user.role != 'user'"
          class="navbar-nav me-auto mb-2 mb-lg-0"
        >
          <li class="nav-item">
            <router-link class="nav-link active" aria-current="page" to="/"
              >Главная</router-link
            >
          </li>
          <li class="nav-item">
            <router-link class="nav-link active" aria-current="page" to="/view"
              >Заявления</router-link
            >
          </li>
          <li class="nav-item">
            <router-link class="nav-link active" aria-current="page" to="/users"
              >Пользователи</router-link
            >
          </li>
          <li class="nav-item">
            <router-link class="nav-link active" aria-current="page" to="/organizations"
              >Организации</router-link
            >
          </li>
        </ul>
        <div v-if="!user" class="d-flex">
          <router-link class="btn btn-primary mx-2" to="/login"
            >Login</router-link
          >
          <router-link class="btn btn-secondary" to="/signup"
            >Register</router-link
          >
        </div>
        <div v-else class="d-flex dropdown">
          <button
            class="btn btn-secondary dropdown-toggle"
            id="navbarDropdown"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            {{ user.name }}
          </button>
          <ul
            class="dropdown-menu dropdown-menu-lg-end"
            aria-labelledby="navbarDropdown"
          >
            <li><router-link class="dropdown-item" to="/me">Личный кабинет</router-link></li>
            <!-- <li>
              <a class="dropdown-item" href="#">Еще что-то. Пока не придумал</a>
            </li> -->
            <li><hr class="dropdown-divider" /></li>
            <li>
              <router-link class="dropdown-item" to="/logout"
                >Logout</router-link
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</template>
  
<script>
export default {
  props: {
    tokens: Object,
    user: Object,
  },
};
</script>
  
<style>
</style>